<template>
  <ComputedAttribute msg="computed 属性和 function " v-show="false" />
  <hr />
  <ComputedCase msg="使用计算属性的案例-购物车结算" v-show="false" />
  <hr />
  <WatchAttribute msg="watch 监听器" v-show="false" />
  <hr />
  <LifeCycle msg="生命周期" v-show="false" />
  <hr />
  <AxiosDemo v-show="false" />
  <hr />
  <RefDemo ref="testRef" v-show="false" />
  <button @click="getRef" v-show="false">点击重置ref组件</button>
  <hr />
  <ComponentDemo v-show="false" />
  <hr />
  <!-- <SlotDemo > -->
    <!-- <img src="./assets/logo.png" alt="" />
    <p class="slot-red">我是默认插槽内容1</p>
    <h3 class="slot-red">我是默认插槽内容2</h3> -->

    <!-- <template #default>
      <img src="./assets/logo.png" alt="">
      <p class="slot-red">我是默认插槽内容1 </p>
      <h3 class="slot-red">我是默认插槽内容2</h3>
    </template> -->

    <!-- <template #myName>
      <p class="slot-red">我是具名插槽内容1</p>
      <p class="slot-red">我是具名插槽内容2</p>
      <img src="./assets/logo.png" />
    </template> -->

    <!-- <template #zuoyongyu="scoped">
      <p>{{ scoped }}</p>
    </template> -->
    <!-- <template #zuoyongyu="{info,message}">
      <p>{{info}}</p>
      <p>{{message}}</p>
    </template> -->
  <!-- </SlotDemo> -->
  <hr />
  <!-- <SlotTestDemo class="container" @changeParentIndex="changeIndex($event)" :list="['液位监控', '进油记录','报警记录']" />
  <h1 v-if="index == 0">0</h1>
  <h2 v-if="index == 1">1</h2>
  <h3 v-if="index == 2">2</h3> -->
  <hr>
  <h2>setup1</h2>
  <Setup1 />
  <hr>
  <h2>setup2</h2>
  <Setup2 />
</template>

<script>
import ComputedAttribute from "./components/01-computedAttribute.vue";
import ComputedCase from "./components/02-computedCase.vue";
import WatchAttribute from "./components/03-watchAttribute.vue";
import LifeCycle from "./components/04-lifeCycle.vue";
import AxiosDemo from "./components/05-axios.vue";
import RefDemo from "./components/06-ref.vue";
import ComponentDemo from "./components/07-component.vue";
// import SlotDemo from "./components/08-slot.vue";
// import SlotTestDemo from "./components/08-slot-test.vue";
import Setup1 from "./components/09_setup1.vue";
import Setup2 from "./components/10_setup2.vue";

export default {
  name: "App",
  components: {
    ComputedAttribute,
    ComputedCase,
    WatchAttribute,
    LifeCycle,
    AxiosDemo,
    RefDemo,
    ComponentDemo,
    // SlotDemo,
    // SlotTestDemo,
    Setup1,
    Setup2
  },
  data() {
    return {
      index:0
    }
  },
  methods: {
    click() {
      console.log("clickclick");
    },
    /* 
      ref 属性不仅可以找到控件
      还可以找到组件，还可以访问组件中定义的方法
    */
    getRef() {
      this.$refs.testRef.reset();
      console.log("this.$refs.testRef:", this.$refs.testRef);
    },
    changeIndex(i) {
      console.log("我是子组件传递过来的值：",i);
      this.index = i;
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.slot-red {
  color: rgb(240, 110, 110);
  font-weight: 700;
}

img {
  width: 40px;
  height: 40px;
}
.container {
  border: 1px solid rgb(28, 231, 79);
}
</style>
